<template>
    <div class="view-container">
        <div class="customerList">
        <!--用户信息-->
        <div class="searchBar">
            <el-form ref="form" label-width="8em"  :inline="true">
                <el-form-item label="用户ID">
                    <el-input  placeholder="请输入用户ID"
                              v-model="queryUserId" style="width: 325px;"></el-input>
                </el-form-item>
                <el-form-item label="交易时间">
                    <el-date-picker
                                    v-model="queryTime"
                                    type="datetimerange"
                                    :picker-options="pickerOptions2"
                                    placeholder="选择时间范围"
                                    align="right">
                    </el-date-picker>
                </el-form-item>
                <br/>
                <el-form-item label="用户名">
                    <el-input  placeholder="请输入用户名"
                              v-model="queryUserName" style="width: 325px;"></el-input>
                </el-form-item>
                <br>
                <el-form-item class="editBtn">
                    <el-button @click="getCustomersListByParams" type="primary">搜索</el-button>
                    <el-button @click="clearDate">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--结果-->
        <Empty v-if="customerList.length==0">没有新消息</Empty>
        <div class="searchResult" v-if="customerList.length!==0" v-loading="loading">
            <el-table
                    ref="multipleTable"
                    :data="customerList"
                    border
                    tooltip-effect="dark"
                    style="min-width: 1078px;"
                    @selection-change="handleSelectionChange">
                <!--<el-table-column
                        type="selection"
                        width="55">
                </el-table-column>-->
                <el-table-column
                        label="用户ID"
                        width="120"
                        prop="userId">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="用户名"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="contactNumber"
                        label="手机号码">
                </el-table-column>
                <el-table-column
                        label="上次交易时间">
                    <template slot-scope="scope">
                        {{scope.row.lastTransactionTime| parseTime}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-popover
                                ref="order"
                                placement="left"
                                width="800"
                                trigger="click">
                            <el-table :data="orderLists" style="height: 300px;overflow: auto;">
                                <el-table-column width="200" label="订单编号">
                                    <template slot-scope="scope">
                                        <el-button @click="toOrderDetail(scope.row.orderNumber)" type="text">
                                            {{scope.row.orderNumber}}
                                        </el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column width="200" property="goodsName" label="商品名称"></el-table-column>
                                <el-table-column width="200" property="totalRent" label="总租金">
                                    <template slot-scope="scope">
                                        {{scope.row.totalRent | parsePrice}}
                                    </template>
                                </el-table-column>
                                <el-table-column width="200" property="state" label="订单状态"></el-table-column>
                            </el-table>
                        </el-popover>
                        <el-button
                                type="text"
                                v-popover:order @click="getRecord(scope.row.userId)">他的交易
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalLists">
            </el-pagination>
        </div>
    </div>

    </div>
</template>

<script>
    import {consumerLists, getOrderRecord} from '@/api/usersList';
    import {parseTime, timeToServer} from '@/utils/datetime'
    //import {} from '@/utils/datetime'
    import Empty from '@/components/Empty'

    export default {
        name: 'customerList',
        components: {
            'Empty': Empty
        },
        data() {
            return {
                loading:false,
                pageSize: 5,
                totalLists: 0,
//              订单假数据
                orderLists: [],
                pickerOptions2: {
                    shortcuts: [
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                },
                queryTime: [],
                queryUserId: '',
                queryUserName: '',
                customerList: [],
                currentPage: 1
            }
        },
        mounted() {
//            什么参数都不传
            this.currentPage = 1;
            this.pageSize = 5;
            this.getCustomersListByParams();
        },
        methods: {
            clearDate() {
                this.queryTime = [];
                this.queryUserId = '';
                this.queryUserName = '';
            },
            getCustomersListByParams() {
                this.loading=true;
//            根据数据查询 消费者列表
                let data = {
                    "userId": this.queryUserId,
                    "userName": this.queryUserName,
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize
                };
//                默认值
//                console.log(typeof (new Date(this.queryTime[0]).valueOf()));
                if (this.queryTime.length !== 0) {
                    data.startTransactionTime = timeToServer(this.queryTime[0]);
                    data.endTransactionTime = timeToServer(this.queryTime[1]);
                }
                consumerLists(data)
                    .then((resp) => {
                       /* for (let item of resp.data.list) {
                            item.lastTransactionTime = parseTime(item.lastTransactionTime / 1000);
                        }*/
                        this.customerList = resp.data.list;
                        this.totalLists = resp.data.total;

                        setTimeout(()=> {
                            this.loading=false;
                        },300);
                    })
                    .catch((err) => {
                        setTimeout(()=> {
                            this.loading=false;
                        },300);
                    });
            },
            handleSelectionChange() {
//暂时用不到
            },
            handleSizeChange(val) {
//             每页条数 后台传参数直接获取渲染 当前的customerList
                this.pageSize = val;
                this.getCustomersListByParams();
            }
            ,
            handleCurrentChange(val) {
//             当前页数
                this.currentPage = val;
                this.getCustomersListByParams()
            },
            getRecord(uid) {
                let data = {
                    uid: uid
                };
                getOrderRecord(data)
                    .then((resp) => {
                        this.orderLists = resp.data;
                    }).catch((err) => {
                })
            },
            toOrderDetail(orderId) {
                this.$router.push({name: 'orderInfo', query: {id: orderId}});
            }
        }
    }
</script>

<style lang="less" scoped>
    .customerList {
        .searchBar {
            background: rgba(249, 249, 249, 1);
            padding: 24px;
            .editBtn {
                display: block;
                text-align: center;
                margin-top: 24px;
                .el-button {
                    margin-left: 40px;
                }
            }
        }

        .searchResult {
            margin-top: 50px;
            > p {
                background: url('../../assets/icon/icon_no data.png') no-repeat 40% center;
                text-align: center;
                height: 100px;
                line-height: 100px;
            }
        }

        .el-pagination {
            margin-top: 24px;
            text-align: center;
        }
    }

</style>
